<template>
  <div class="taskBox">
    <el-carousel indicator-position="outside" trigger="click"
      arrow="never" :loop="true" :interval="10000">
      <el-carousel-item v-for="(items, index) in taskData" :key="index">
        <div class="orderGroup flex_wb">
          <div class="orderItem flex_cb" v-for="item in items" :key="item.id" >
            <p class="orderName">订单号：{{item.orderName}}</p>
            <div class="orderInfo">
              <p class="flex_b">
                <span>产品名称：{{item.productName}}</span>
                <span>订购数量：{{item.orderNum}}</span>
              </p>
              <p class="flex_b">
                <span>下单日期：{{item.orderDate}}</span>
                <span>交货日期：{{item.deliveryDate}}</span>
              </p>
            </div>
            <div class="planBox">
              <p class="bar flex">
                <span v-for="(unit, planIndex) in item.plan.process" :key="unit.id"
                  :class="item.plan.now - 1 >= planIndex ? item.plan.now - 1 == planIndex ?'finish now':'finish':''"
                  class="relative"></span>
              </p>
              <p class="text flex">
                <span v-for="unit in item.plan.process" :key="unit.id">{{unit.name}}</span>
              </p>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';
  
  export default {
    name: 'TaskSchedule',

    data () {
      return {
        taskData: [                           //任务数据
          {
            id: 1, orderName: 'dindanhao', productName: 'chanpinming', orderNum: '123', orderDate: '2018/11/20', deliveryDate: '2018/11/21', 
            plan: { now: 3, process:[ {id: 1, name: '吹膜'}, {id: 2, name: '分切'}, {id: 3, name: '折膜'}, {id: 4, name: '制袋'}
              ]
            }
          }
        ],
        timeOut: '',                          //计时器
      }
    },

    created () {
      let that = this;
      let data = [];
      for(var i = 0, len = that.taskData.length; i < len;i += 6){       //接口确定后删除
        data.push(that.taskData.slice(i,i + 6));
      }
      that.taskData = data;
      console.log(that.taskData)

      // that.loadData ()                           //接口确定后解开

      that.timeOut = setInterval(function(){
        that.loadData()
      },60*60*1000);
    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      loadData () {
        let that = this;
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);
          that.taskData = res.data;
          let data = [];
          for(var i = 0, len = that.taskData.length; i < len;i += 6){
            data.push(that.taskData.slice(i,i + 6));
          }
          that.taskData = data;
        })
        .catch(error=>{
          console.log(error);
        });
      }
    },
  }
</script>

<style scoped>
  .taskBox{
    width: 100%;
    height: 100%;
  }
  .orderGroup{
    width: 100%;
    height: 100%;
  }
  .orderItem{
    width: 49%;
    height: 31%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #2a435f;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #2b4e6a), color-stop(100%, #303e5e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b4e6a, endColorstr=#303e5e, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .orderItem p{
    margin: 0
  }
  .orderItem .orderName{
    width: 100%;
    font-size: 18px;
    color: #7ecef4;
  }
  .orderItem .orderInfo{
    width: 100%;
    margin-bottom: 0.2%;
    font-size: 14px;
    color: #fff
  }
  .orderInfo p{
    margin: 10px 0;
  }
  .orderInfo p span{
    display: inline-block;
    width: 50%;
  }
  .planBox{
    width: 100%
  }
  .planBox .bar{
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background-color: #67707e;
  }
  .planBox span{
    height: 100%;
    width: 100%;
    display: inline-block;
    text-align: center;
  }
  .planBox span:first-child{
    border-radius: 7px 0 0 7px;
  }
  .planBox span.now{
    border-radius: 0 7px 7px 0;
  }
  .planBox .text{
    color: #7ecef4;
    font-size: 12px;
  }
  .planBox .bar .finish{
    background-color: #fdb984;
  }
  .planBox .bar .now:before{
    content: '';
    display: block;
    position: absolute;
    margin-left: -8px;
    left: 50%;
    top: -7px;
    border-width: 5px 8px 5px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #41a8ff;
    transform: rotate(90deg)
  }
</style>


